<template>
  <!-- 生产场所管理 -->
  <div class="productionSiteManager">
    <basic-container>
      <!-- 表格内容 -->
      <avue-crud :option="option"
                 :table-loading="loading"
                 :data="data"
                 :page.sync="page"
                 :permission="permissionList"
                 :before-open="beforeOpen"
                 v-model="form"
                 ref="crud"
                 @row-update="rowUpdate"
                 @row-save="rowSave"
                 @row-del="rowDel"
                 @search-change="searchChange"
                 @search-reset="searchReset"
                 @selection-change="selectionChange"
                 @current-change="currentChange"
                 @size-change="sizeChange"
                 @refresh-change="refreshChange"
                 @on-load="onLoad">
        <template slot="menuLeft">
          <el-button type="danger" size="small" icon="el-icon-delete" plain v-if="permission.production_site_delete" @click="handleDelete">删 除</el-button>
          <el-button type="success" size="small" icon="el-icon-upload2" plain v-if="permission.production_site_import" @click="handleImport">导入</el-button>
          <el-button type="warning" size="small" icon="el-icon-download" plain v-if="permission.production_site_export" @click="handleExport">导出</el-button>
        </template>

        <template slot="idsLabel">
          <span style="color:#F56C6C">*</span><span>绑定风险点:</span>
        </template>
        <template slot="idsForm">
          <el-form label-width="0px">
            <el-button type="success" size="small" @click="handleRisk">选择 风险点</el-button>
            <span v-if="riskTagsErr" class="risk_error">请选择风险点</span>
            <div class="risk_point_list">
              <el-tag :key="index" v-for="(tag, index) in riskTags" closable :disable-transitions="false" @close="closeRiskTag(index)">{{tag.fxdbh}}</el-tag>
            </div>
          </el-form>
        </template>

        <!--巡检点-->
        <template slot="ckxjjl">
          <el-form label-width="0px">
            <td style="border: 0px">
              <el-button type="primary" size="small" @click="handleCamera">查看巡检记录</el-button>
            </td>
          </el-form>
        </template>

        <!-- 地图表单自定义 -->
        <template slot="deptMapForm">
          <div v-if="deptShowMap">
            <baidu-map class="map" :center="center" :zoom="zoom" @ready="productionSiteHandler">
              <el-input placeholder="关键词查询" v-model="searchWord" style="position:absolute;top:10px;left:10px;width:180px;">
                <template slot="append">
                  <el-button icon="el-icon-search" id="citySearch"></el-button>
                </template>
              </el-input>

              <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
              <bm-marker :position="mapPosition" :dragging="true"></bm-marker>
            </baidu-map>
          </div>
        </template>

        <!-- 场所内危险化学品表格自定义 -->
        <template slot="dynwxhxp" slot-scope="scope">
          <div>{{cellChemicals(scope.row)}}</div>
        </template>

      </avue-crud>

      <!-- 绑定风险点弹窗 -->
      <el-dialog title="选择 风险点" :visible.sync="dialogRisk" append-to-body @close='closeDialog' width="1200px" class="productionSiteManager">
        <avue-crud :option="riskOption"
                   :table-loading="riskLoading"
                   :data="riskData"
                   :page.sync="riskPage"
                   ref="riskCrud"
                   @search-change="riskSearchChange"
                   @search-reset="riskSearchReset"
                   @selection-change="riskSelectionChange"
                   @current-change="riskCurrentChange"
                   @size-change="riskSizeChange">
        </avue-crud>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="chooseRisk()">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="生产场所数据导入" append-to-body :visible.sync="excelBox" width="555px">
        <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
          <template slot="excelTemplate">
            <el-button type="primary" @click="handleTemplate">
              点击下载<i class="el-icon-download el-icon--right"></i>
            </el-button>
          </template>
        </avue-form>
      </el-dialog>

      <!-- 绑定摄像头弹窗 -->
      <el-dialog title="选择 摄像头" :visible.sync="dialogCamera" append-to-body @close='closeDialogCamera' width="1200px" class="productionSiteManager">
        <avue-crud :option="cameraOption"
                   :table-loading="cameraLoading"
                   :data="cameraData"
                   :page.sync="cameraPage"
                   ref="cameraCrud"
                   @search-change="cameraSearchChange"
                   @search-reset="cameraSearchReset"
                   @selection-change="cameraSelectionChange"
                   @current-change="cameraCurrentChange"
                   @size-change="cameraSizeChange">
        </avue-crud>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialogCamera">取 消</el-button>
          <el-button type="primary" @click="chooseCamera()">确 定</el-button>
        </span>
      </el-dialog>

    </basic-container>
  </div>
</template>

<script>
  import {getList, remove, update, add, getProductionSiteInfo, getRiskSList, getCellChemicalsList} from "@/api/mmhi/production_site";
  import {getCameraBinding} from "@/api/mmhi/major_supe_hazard_chem";
  import {validateDigitEnglish} from "@/api/mmhi/validate";
  import {getToken} from "@/util/auth";
  import {mapGetters} from "vuex";

  export default {
    data() {
      return {
        form: {},
        query: {},
        excelBox: false,
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        excelForm: {},
        excelOption: {
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: '模板上传',
              prop: 'excelFile',
              type: 'upload',
              drag: true,
              loadText: '模板上传中，请稍等',
              showFileList: false,
              span: 24,
              propsHttp: {
                res: 'data'
              },
              tip: '请上传 .xls,.xlsx 标准格式文件',
              action: "/api/productionSiteManage/bladeProductionSite/import-productionSite"
            },
            {
              label: '模板下载',
              prop: 'excelTemplate',
              formslot: true,
              span: 24,
            }
          ]
        },
        option: {
          height: 'auto',
          refreshBtn: true,
          columnBtn: true,
          dialogWidth: 950,
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          column: [
            {
              label: "场所名称",
              prop: "sccsmc",
              width:90,
              align: "center",
              maxlength:15,
              search: true,
              rules: [{
                required: true,
                message: "请输入场所名称",
                trigger: "click"
              }]
            },
            {
              label: "固定资产总产值（万元）",
              prop: "gdzczz",
              width:"155px",
              maxlength:100,
              align: "center",
              rules: [{
                required: true,
                message: "请输入固定资产总产值（万元）",
                trigger: "blur"
              }],
            },
            {
              label: '',
              prop: 'deptMap',
              span: 24,
              hide: true,
              formslot: true,
            },
            {
              label: "纬度",
              prop: "wd",
              width:90,
              align: "center",
              readonly:true,
              rules: [{
                required: true,
                message: "请输入纬度",
                trigger: "blur"
              }],
            },
            {
              label: "经度",
              prop: "jd",
              width:90,
              align: "center",
              readonly:true,
              rules: [{
                required: true,
                message: "请输入经度",
                trigger: "blur"
              }],
            },
            {
              label: "编号",
              prop: "bh",
              align: "center",
              maxlength:6,
              rules: [{
                required: true,
                validator: validateDigitEnglish,
                trigger: "blur"
              }],
            },
            {
              label: "占地面试（m²）",
              prop: "zdmj",
              width:120,
              align: "center",
              maxlength:50,
              rules: [{
                required: true,
                message: "请输入占地面试（m²）",
                trigger: "blur"
              }],
            },
            {
              label: "正常当班人数",
              prop: "czdbrs",
              width:120,
              align: "center",
              maxlength:150,
              rules: [{
                required: true,
                message: "请输入正常当班人数",
                trigger: "blur"
              }],
            },
            {
              label: "场所内危险化学品",
              prop: "dynwxhxp",
              width:140,
              align: "center",
              multiple: true,
              type: "tree",
              dicUrl: "/api/productionSiteManage/bladeProductionSite/getCsnwxhxp?code=dynwxhxp",
              props: {
                label: "dictValue",
                value: "dictKey",
              },
              checkStrictly: true,
              slot:true,
              rules: [{
                required: true,
                message: "请选择场所内危险化学品",
                trigger: "click"
              }]
            },
            {
              label: "风险点",
              prop: "fxdbh",
              align: "center",
              addDisplay: false,
              viewDisplay: false,
              editDisplay: false,
              hide: true,
            },
            {
              label: "绑定风险点",
              prop: "ids",
              align: "center",
              hide: true,
              viewDisplay: false,
              formslot:true,
              labelslot:true
            },
            {
              label: "备注",
              prop: "bz",
              align: "center",
              type: "textarea",
              maxlength:1000,
              span: 24,
              minRows: 6,
              hide: true
            },
            {
              label: "操作",
              width: "120px",
              prop: "ckxjjl",
              slot: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              hide: false,
              align: "center"
            },
            {
              label: "企业id",
              prop: "bladeDeptId",
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false
            },
            {
              label: "租户id",
              prop: "tenantId",
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false
            },
            {
              label: "创建人",
              prop: "createUser",
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false
            },
            {
              label: "创建部门",
              prop: "createDept",
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false
            },
            {
              label: "创建时间",
              prop: "createTime",
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false
            }
          ]
        },
        data: [],
        dialogRisk: false,
        riskQuery: {},
        riskLoading: true,
        riskPage: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        riskSelectionList: [],
        riskOption: {
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          menu: false,
          addBtn: false,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          refreshBtn: false,
          columnBtn: false,
          column: [
            {
              label: "风险点名称",
              prop: "fxdmc",
              align: "center",
              search: true
            },
            {
              label: "风险类别",
              prop: "fxfl",
              align: "center"
            },
            {
              label: "事故类型",
              prop: "zysglx",
              align: "center"
            },
            {
              label: "所属部门",
              prop: "ssbm",
              align: "center"
            }
          ]
        },
        riskData: [],
        riskTags: [],
        riskTagsErr: false,
        selectRisk: {},

        dialogCamera: false,
        cameraQuery: {},
        cameraLoading: true,
        cameraPage: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        cameraSelectionList: [],
        cameraOption: {
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          menu: false,
          addBtn: false,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          refreshBtn: false,
          columnBtn: false,
          column: [
            {
              label: "摄像头名称",
              prop: "sxtmc",
              align: "center",
              search: true
            },
            {
              label: "摄像头ID",
              prop: "sxtid",
              align: "center"
            },
            {
              label: "安装位置",
              prop: "azwz",
              align: "center"
            },
            {
              label: "所属区域",
              prop: "ssqy",
              align: "center"
            }
          ]
        },
        cameraData: [],
        selectCamera: {},

        mapPosition: {
          lng: 121.4472540000,
          lat: 31.3236200000
        },
        center: {
          lng: 121.4472540000,
          lat: 31.3236200000
        },

        zoom: 10,
        dragging: false,
        deptShowMap: true,
        searchWord: "",

        // 场所内危险化学品
        cellChemicalsList: {}
      };
    },
    computed: {
      ...mapGetters(["permission"]),

      // 表格按钮权限
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.production_site_add, false),
          viewBtn: this.vaildData(this.permission.production_site_view, false),
          delBtn: this.vaildData(this.permission.production_site_delete, false),
          editBtn: this.vaildData(this.permission.production_site_edit, false)
        };
      },
      // 勾选项id
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    mounted() {
      this.initData();
    },
    methods: {
      // 初始化数据
      initData() {
        this.getCellChemicals();
      },
      // 获取场所内危险化学品列表
      getCellChemicals() {
        getCellChemicalsList().then(res => {
          this.cellChemicalsList = {};
          res.data.data.forEach(item => {
            this.cellChemicalsList[item.dictKey] = item.dictValue;
          });
        })
      },
      // 显示场所内危险化学品列
      cellChemicals(row) {
        if(row.dynwxhxp === undefined || typeof row.dynwxhxp === "object") {
          return "";
        }
        const arr = row.dynwxhxp.split("|");
        const faults = [];
        for(let i = 0 ; i < arr.length ; i++) {
          const fault = this.cellChemicalsList[arr[i]] === undefined ? arr[i] : this.cellChemicalsList[arr[i]];
          faults.push(fault);
        }
        return faults.join("|");
      },

      // 地图处理事件
      productionSiteHandler({BMap, map}) {
        let _this = this;
        map.addEventListener('click', function(e) {
          _this.form.jd = e.point.lng
          _this.form.wd = e.point.lat
        });
        _this.$nextTick(() => {
          document.getElementById('citySearch').addEventListener('click', function() {
            let localSearch = new BMap.LocalSearch(map)
            localSearch.setSearchCompleteCallback(searchResult => {
              let poi = searchResult.getPoi(0)
              if(!poi) {
                return _this.$message.warning('该地址不存在')
              } else {
                _this.center = {
                  lng: poi.point.lng,
                  lat: poi.point.lat
                }
                _this.form.jd = poi.point.lng
                _this.form.wd = poi.point.lat
              }
            });
            localSearch.search(_this.searchWord);
          });
        })
      },

      // 打开选择风险点弹窗
      handleRisk() {
        this.dialogRisk = true;
        this.riskOnLoad(this.riskPage);
      },

      // 关闭选择风险点弹窗
      closeDialog() {
        this.riskPage.currentPage = 1;
        this.dialogRisk = false;
        this.riskSelectionClear();
      },

      // 风险点获取表格数据
      riskOnLoad(page, params = {}) {
        this.riskLoading = true;
        getRiskSList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.riskPage.total = data.total;
          this.riskData = data.records;
          this.riskLoading = false;
          if(this.selectRisk !== undefined && JSON.stringify(this.selectRisk) !== "{}" && this.riskTags.length !== 0) {
            this.$nextTick(() => {
              this.riskData.forEach(row => {
                if(this.selectRisk[row.id] !== undefined) {
                  this.$refs.riskCrud.toggleRowSelection(row, true);
                }
              })
            })
          }
        });
      },

      // 风险点清空勾选
      riskSelectionClear() {
        this.riskSelectionList = [];
        this.$refs.riskCrud.toggleSelection();
      },

      // 风险点搜索条件改变事件
      riskSearchChange(params, done) {
        this.riskQuery = params;
        this.riskPage.currentPage = 1;
        this.riskOnLoad(this.riskPage, params);
        done();
      },

      // 风险点清空搜索条件
      riskSearchReset() {
        this.riskQuery = {};
        this.riskOnLoad(this.riskPage);
      },

      // 风险点勾选
      riskSelectionChange(list) {
        this.riskSelectionList = list;
      },

      // 风险点换页数
      riskCurrentChange(currentPage){
        const pageSelectIds = [];
        const pageAllIds = [];
        this.riskSelectionList.forEach(item => {
          this.selectRisk[item.id] = item;
          pageSelectIds.push(item.id);
        });
        this.riskData.forEach(item => {
          pageAllIds.push(item.id);
        });
        for(let id in this.selectRisk) {
          if(pageSelectIds.indexOf(id) < 0 && pageAllIds.indexOf(id) >= 0) {
            delete this.selectRisk[id];
          }
        }
        this.riskPage.currentPage = currentPage;
        this.riskOnLoad(this.riskPage);
      },

      // 风险点换每页显示数量
      riskSizeChange(pageSize){
        this.riskPage.pageSize = pageSize;
        this.riskOnLoad(this.riskPage);
      },

      // 选择风险点
      chooseRisk() {
        const pageSelectIds = [];
        const pageAllIds = [];
        this.riskSelectionList.forEach(item => {
          this.selectRisk[item.id] = item;
          pageSelectIds.push(item.id);
        });
        this.riskData.forEach(item => {
          pageAllIds.push(item.id);
        });
        for(let id in this.selectRisk) {
          if(pageSelectIds.indexOf(id) < 0 && pageAllIds.indexOf(id) >= 0) {
            delete this.selectRisk[id];
          }
        }
        if(this.selectRisk === undefined || JSON.stringify(this.selectRisk) === "{}") {
          this.$message.warning("请选择风险点");
          return;
        }
        this.riskTagsErr = false;
        this.riskTags = [];
        for(let id in this.selectRisk) {
          this.riskTags.push(this.selectRisk[id]);
        }
        this.closeDialog();
      },

      // 删除某一个risk标签
      closeRiskTag(index) {
        this.riskTags.splice(index, 1);
        if(this.riskTags.length === 0) {
          this.riskTagsErr = true;
        }
      },

      // 打开绑定摄像头弹窗
      handleCamera() {
        this.dialogCamera = true;
        this.cameraOnLoad(this.cameraPage);
      },

      // 关闭绑定摄像头弹窗
      closeDialogCamera() {
        this.cameraPage.currentPage = 1;
        this.dialogCamera = false;
        this.cameraSelectionClear();
      },

      // 摄像头获取表格数据
      cameraOnLoad(page, params = {}) {
        this.cameraLoading = true;
        getCameraBinding(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.cameraPage.total = data.total;
          this.cameraData = data.records;
          this.cameraLoading = false;
          if(this.selectCamera !== undefined && JSON.stringify(this.selectCamera) !== "{}") {
            this.$nextTick(() => {
              this.cameraData.forEach(row => {
                if(this.selectCamera[row.id] !== undefined) {
                  this.$refs.cameraCrud.toggleRowSelection(row, true);
                }
              })
            })
          }
        });
      },

      // 绑定摄像头清空勾选
      cameraSelectionClear() {
        this.cameraSelectionList = [];
        this.$refs.cameraCrud.toggleSelection();
      },

      // 摄像头搜索条件改变事件
      cameraSearchChange(params, done) {
        this.cameraQuery = params;
        this.cameraPage.currentPage = 1;
        this.cameraOnLoad(this.cameraPage, params);
        done();
      },

      // 摄像头清空搜索条件
      cameraSearchReset() {
        this.cameraQuery = {};
        this.cameraOnLoad(this.cameraPage);
      },

      // 摄像头勾选
      cameraSelectionChange(list) {
        this.cameraSelectionList = list;
      },

      // 摄像头换页数
      cameraCurrentChange(currentPage){
        const pageSelectIds = [];
        const pageAllIds = [];
        this.cameraSelectionList.forEach(item => {
          this.selectCamera[item.id] = item;
          pageSelectIds.push(item.id);
        });
        this.cameraData.forEach(item => {
          pageAllIds.push(item.id);
        });
        for(let id in this.selectCamera) {
          if(pageSelectIds.indexOf(id) < 0 && pageAllIds.indexOf(id) >= 0) {
            delete this.selectCamera[id];
          }
        }
        this.cameraPage.currentPage = currentPage;
        this.cameraOnLoad(this.cameraPage);
      },

      // 摄像头换每页显示数量
      cameraSizeChange(pageSize){
        this.cameraPage.pageSize = pageSize;
        this.cameraOnLoad(this.cameraPage);
      },

      // 选择摄像头
      chooseCamera() {
        const pageSelectIds = [];
        const pageAllIds = [];
        this.cameraSelectionList.forEach(item => {
          this.selectCamera[item.id] = item;
          pageSelectIds.push(item.id);
        });
        this.cameraData.forEach(item => {
          pageAllIds.push(item.id);
        });
        for(let id in this.selectCamera) {
          if(pageSelectIds.indexOf(id) < 0 && pageAllIds.indexOf(id) >= 0) {
            delete this.selectCamera[id];
          }
        }
        this.closeDialogCamera();
      },

      // 新增
      rowSave(row, done, loading) {
        for(let key in row) {
          if(key.indexOf("$") >= 0) {
            delete row[key];
          }
        }
        row.dynwxhxp = typeof row.dynwxhxp === "object" ? row.dynwxhxp.join("|") : row.dynwxhxp;

        if(this.riskTags.length === 0) {
          this.riskTagsErr = true;
          loading();
          return;
        }
        delete row.fxdbh;
        const idsArr = [];
        this.riskTags.forEach(item => {
          idsArr.push(item.id);
        });
        row.ids = idsArr.join(",");

        add(row).then(() => {
          this.onLoad(this.page);
          this.$message.success("操作成功!");
          done();
        }, error => {
          loading();
          window.console.log(error);
        });
      },

      // 编辑
      rowUpdate(row, index, done, loading) {
        for(let key in row) {
          if(key.indexOf("$") >= 0) {
            delete row[key];
          }
        }

        const arr = row.dynwxhxp.split(",");
        const faults = [];
        for(let i = 0 ; i < arr.length ; i++) {
          const fault = arr[i];
          faults.push(fault);
        }
        row.dynwxhxp = faults.join("|");

        if(this.riskTags.length === 0) {
          this.riskTagsErr = true;
          loading();
          return;
        }
        const idsArr = [];
        const updateData = {
          id: row.id,
          fxdbh: row.fxdbh,
          fxdmc: row.fxdmc,
          dynwxhxp: row.dynwxhxp,
          sccsmc: row.sccsmc,
          gdzczz: row.gdzczz,
          wd: row.wd,
          jd: row.jd,
          bh: row.bh,
          zdmj: row.zdmj,
          czdbrs: row.czdbrs,
          bz: row.bz,
          bladeDeptId: row.bladeDeptId,
          tenantId: row.tenantId,
          createUser: row.createUser,
          createDept: row.createDept,
          createTime: row.createTime,
          ids: ""
        };
        this.riskTags.forEach(item => {
          idsArr.push(item.id);
        });
        updateData.ids = idsArr.join(",");

        update(updateData).then(() => {
          this.onLoad(this.page);
          this.$message.success("操作成功!");
          done();
        },error => {
          window.console.log(error);
          loading();
        });
      },

      // 删除一条
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          return remove(row.id);
        }).then(() => {
          this.onLoad(this.page);
          this.$message.success("操作成功!");
        });
      },

      // 删除多条
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          return remove(this.ids);
        }).then(() => {
          this.onLoad(this.page);
          this.$message.success("操作成功!");
          this.$refs.crud.toggleSelection();
        });
      },

      // 打开弹窗前
      beforeOpen(done, type) {
        this.riskTagsErr = false;
        this.riskTags = [];
        this.selectRisk = {};
        if(type === "add") {
          this.deptShowMap = true;
          this.mapPosition = {
            lng: 121.4472540000,
            lat: 31.3236200000
          };
          this.center = {
            lng: 121.4472540000,
            lat: 31.3236200000
          };
        } else {
          if(type === "edit") {
            this.deptShowMap = true;
            this.center = {
              lng: this.form.jd,
              lat: this.form.wd
            };
            this.zoom = 10;
          } else if(type === "view") {
            this.deptShowMap = false;
          }
          getProductionSiteInfo(this.form.id).then(res => {
            const arr =  res.data.data.dynwxhxp.split("|");
            const faults = [];
            for(let i = 0 ; i < arr.length ; i++) {
              const fault = arr[i];
              faults.push(fault);
            }
            res.data.data.dynwxhxp = faults.join(",");
            this.form = res.data.data;
            this.form.riskDataSiteInfos.forEach(item => {
              this.riskTags.push(item);
              this.selectRisk[item.id] = item;
            });
          });
        }
        done();
      },

      // 清空搜索条件
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },

      // 搜索条件改变事件
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },

      // 勾选
      selectionChange(list) {
        this.selectionList = list;
      },

      // 清空勾选
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },

      // 换页数
      currentChange(currentPage){
        this.page.currentPage = currentPage;
        this.onLoad(this.page);
      },

      // 换每页显示数量
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
        this.onLoad(this.page);
      },

      // 刷新
      refreshChange() {
        this.onLoad(this.page, this.query);
      },

      // 获取表格数据
      onLoad(page, params = {}) {
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      },
      handleImport() {
        this.excelBox = true;
      },
      uploadAfter(res, done, loading, column) {
        window.console.log(column);
        this.excelBox = false;
        this.refreshChange();
        done();
      },
      handleTemplate() {
        window.open(`/api/productionSiteManage/bladeProductionSite/export-template?${this.website.tokenHeader}=${getToken()}`);
      },
      handleExport() {
        this.$confirm("是否导出生产场所数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          window.open(`/api/productionSiteManage/bladeProductionSite/export-productionSite?${this.website.tokenHeader}=${getToken()}`);
        });
      },
    },
    watch: {
      // 表单经度
      'form.jd' (val) {
        if(val) {
          this.mapPosition.lng = val / 1
        }
      },
      // 表单纬度
      'form.wd' (val) {
        if(val) {
          this.mapPosition.lat = val / 1
        }
      }
    }
  };
</script>

<style lang="scss">
  .productionSiteManager {
    .el-form-item__label {
      width: 100px !important;
    }
    .avue-form__row {
      .el-form-item__content {
        margin-left: 100px !important;
      }
    }
  }

</style>

<style lang="scss" scpoed>
  .avue-crud__dialog {
    .el-dialog__body {
      .el-form-item__label {
        width: 130px !important;
      }

      .avue-form__row {
        .el-form-item__content {
          margin-left: 130px !important;
        }
      }
    }
  }

  .el-dialog__wrapper {
    .el-dialog__body {
      padding: 10px 20px 20px 20px;

      .el-form-item__label {
        width: 72px;
      }

      .avue-form__row {
        .el-form-item__content {
          margin-left: 72px;
        }
      }

      .avue-crud__menu {
        display: none;
      }
    }
  }

  .risk_error {
    color: #F56C6C;
    font-size: 12px;
    margin-left: 5px;
  }

  .risk_point_list {
    margin-top: 5px;

    .el-tag {
      margin-right: 5px;
    }
  }

  .map {
    width: 100%;
    height: 500px;
  }

</style>
